<template>
  <div id="root">
    <div class="profile-container">
      <div class="ttp-sticky-container" style="top:0;left:0;z-index:200">
        <div role="banner" class="ttp-site-header-wrapper profile-header shadow">
          <div class="ttp-site-header">
            <div class="channel-wrapper">
              <div class="ttp-channel-nav">
                <ul class="ttp-channel-default-nav">

                  <li tabindex="0" >
                    <div class="ttp-channel-default-nav-item" @click="searchByCid(-1)">
                      推荐
                    </div>
                  </li>
                  <li tabindex="0" v-for="(item,index) in citems" :key="item.id + index">
                    <div class="ttp-channel-default-nav-item"  @click="searchByCid(index)">
                      {{ item.name}}
                    </div>
                  </li>

                </ul>
              </div>
            </div>
            <div class="ttp-search-wrapper">
              <div class="search"><input type="text" aria-label="搜索" placeholder="" v-model.trim="keyword">
                <button type="button" aria-label="搜索" @click="searchData"><i></i></button>
              </div>
            </div>
            <div style="margin-left:30px;flex-shrink:0">
              <div class="ttp-header-profile">
                <div class="user-icon" >
                  <a>
                    <img :src="user.avatar" alt=""  @click.prevent="userInfos">
                    {{user.nickname}}
                  </a>
                  <div class="user-list" style="transform:translateX(-86px)"   :class="[userinfo ?'show':'']" >
                    <div class="user-list-content">
                      <router-link :to="{path:'/user',query:{curid:1}}" target="_blank"  class="title">
                        个人主页
                      </router-link>

                      <router-link :to="{path:'/user',query:{curid:2}}" target="_blank"  class="title">
                        我的收藏
                      </router-link>

                      <a target="_self" rel="noopener" role="menuitem" tabindex="-1" @click.prevent="loginOut">退出登录</a>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div role="region" aria-label="作者信息" class="profile-info-wrapper">
        <div class="profile-info-l">
          <a class="avatar"
             rel="nofollow">
          <div class="ttp-avatar auth-none">
            <router-link :to="{path:'/toUser'}" >
              <img :src="user.avatar" alt="">
            </router-link>
        </div>
        </a>
          <div class="detail"><span class="name" style="text-align: left">{{ user.nickname }}</span>
            <div class="relation-stat">
              <p class="stat-item">{{user.description}}</p>
            </div>
          </div>
        </div>
        <div class="profile-info-r"></div>
      </div>
      <div class="main-wrapper">
        <div class="main-l">
          <div role="main" class="profile-tabs-wrapper">
            <div class="profile-tabs-nav">
              <ul style="text-align: left">
                <li tabindex="0" role="tab" aria-label="全部" aria-selected="false"
                    :class="[currentStep==1?'active':'']" @click.prevent="quanbu">全部</li>
                <li tabindex="0" role="tab" aria-label="收藏" aria-selected="true"
                    :class="[currentStep==2?'active':'']" @click.prevent="shoucang">收藏</li>
              </ul>
            </div>

            <div style="display: block;" v-if="currentStep==1">
              <div>
                <div class="profile-tab-feed" v-if="this.aitens.length!=0">
                  <div class="profile-article-card-wrapper">
                    <div class="feed-card-wrapper feed-card-article-wrapper"  v-for="(item,index) in aitens" :key="item.id+index">
                      <div class="feed-card-article single-cover">
                        <div class="feed-card-article-r">
                          <!--                          <div class="feed-card-cover">-->
                          <!--                          &lt;!&ndash;放图片&ndash;&gt;-->
                          <!--                          </div>-->
                        </div>
                        <div class="feed-card-article-l">
                          <router-link :to="'/detail/'+item.id" target="_blank" rel="noopener" class="title">
                            {{ item.name }}
                          </router-link>

                          <div class="feed-card-footer-cmp" >
                            <div class="left-tools" style="width: 100%">
                              <div class="profile-feed-card-tools-text">{{item.zannum}}赞</div>
                              <div class="feed-card-footer-comment-cmp"><a
                                  href="https://www.toutiao.com/article/7081636152117035534/#comment" target="_blank"
                                  rel="noopener nofollow" aria-label="评论数1">{{ item.collections }}收藏</a></div>
                              <div class="feed-card-footer-time-cmp">{{item.createTime}}</div>
                              <div class="feed-card-footer-time-cmp" style="text-align: right;cursor: pointer; float: right;">
                                <p @click.prevent="quxiaoshoucang(index)">取消收藏</p>
                              </div>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="profile-feed-no-more show"><p>无更多内容</p></div>
                </div>

                <div style="display: block;" v-if="this.aitens.length==0">
                  <div>
                    <div class="profile-tab-feed">
                      <div class="profile-empty-tab-tips"><i></i>
                        <p>暂未发表文章</p></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div style="display: block;" v-if="currentStep==2">
              <div>
                <div class="profile-tab-feed" v-if="this.items.length!=0">
                  <div class="profile-article-card-wrapper">
                    <div class="feed-card-wrapper feed-card-article-wrapper"  v-for="(item,index) in items" :key="item.id+index">
                      <div class="feed-card-article single-cover">
                        <div class="feed-card-article-r">
<!--                          <div class="feed-card-cover">-->
<!--                          &lt;!&ndash;放图片&ndash;&gt;-->
<!--                          </div>-->
                        </div>
                        <div class="feed-card-article-l">
                          <router-link :to="'/detail/'+item.articleId" target="_blank" rel="noopener" class="title">
                            {{ item.articleName }}
                          </router-link>

                          <div class="feed-card-footer-cmp">
                            <div class="left-tools" style="width: 100%">
                              <div class="profile-feed-card-tools-text">{{item.zannum}}赞</div>
                              <div class="feed-card-footer-comment-cmp"><a
                                  href="https://www.toutiao.com/article/7081636152117035534/#comment" target="_blank"
                                  rel="noopener nofollow" aria-label="评论数1">{{ item.collections }}收藏</a></div>
                              <div class="feed-card-footer-time-cmp">{{item.articleTime}}</div>
                              <div class="feed-card-footer-time-cmp" style="text-align: right;cursor: pointer; float: right;">
                                <p @click.prevent="quxiaoshoucang(index)">取消收藏</p>
                              </div>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="profile-feed-no-more show"><p>无更多内容</p></div>
                </div>

                <div style="display: block;" v-if="this.items.length==0">
                  <div>
                    <div class="profile-tab-feed">
                      <div class="profile-empty-tab-tips"><i></i>
                        <p>暂无收藏</p></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import articlecollectService from '@/services/articlecollect';
import articleService from '@/services/article'
import categoryService from '@/services/articlecategory';
import cache from "@/utils/cache";
import loginService from "@/services/login";
export default {
  data() {
    return {
      currentStep:"1", //当前选择 1全部 2收藏

      user: {
        code: "",
        nickname:"",
        avatar:"",
        userId:"",
      },
      userInfo:"",
      items:{},//收藏文章
      aitens:{},//发表文章
      citems:{},//分类
      keyword:"",//关键字

      userinfo:false,//个人信息页显示
    }
  },
  created() {
    this.currentStep = this.$route.query.curid
    this.user.avatar = cache.local.get("avatar")
    this.user.nickname = cache.local.get("nickname")
    this.user.userId = cache.local.get("userid")
    this.userInfo = cache.local.get("userinfo")
    this.user = JSON.parse(this.userInfo)
    this.loadCategoires()
    this.getCollect()
    this.findArticleMy()
  },
  methods: {

    //退出登录
    async loginOut(){

      cache.local.remove("token");
      cache.local.remove("userid");
      cache.local.remove("avatar");
      cache.local.remove("nickname");
      cache.local.remove("userinfo");
      const params = {
        userId: this.user.userId
      };
      this.$router.push({name:"index",
        params: {
          index: -1,
          cid: -1
        }
      },)
      try{
        await  loginService.toLoginOut(params);
        console.log("退出成功")

      }catch(e){
        console.log(e)
      }
    },

    quxiaoshoucang(index){
      const articleid = this.items[index].articleId
      articleService.articleCollectMius(articleid).then(()=>{
        this.items.splice(index,1)
      })
    },
    //切换至全部
    quanbu(){
      this.currentStep = 1
    },
    //获取全部数据
    findArticleMy() {
      articleService.findArticleMy().then(res => {
        if (res.status == 200) {
          var arr = res.data;
          this.aitens = arr;
          console.log(this.aitens)
        }
      })
    },
    //切换至收藏
    shoucang(){
      this.currentStep = 2
    },
    //查询用户收藏
    getCollect() {
      articlecollectService.getCollect().then(res => {
        if (res.status == 200) {
          //console.log(res.data)
          this.items = res.data
          if(res.data.length==0 ){
            //console.log(1)
          }
        }
      })
    },
    //个人信息页显示
    userInfos(){
      this.userinfo = !this.userinfo
    },

    //获取分类数据
    loadCategoires() {
      categoryService.findArticleCategories().then(res => {
        if (res.status == 200) {
          var arr = res.data;
          this.citems = arr;
        }
      })
    },
    // 根据分类返回首页
    searchByCid(index) {
      let cid = index != -1 ? this.citems[index].id : "";
      this.$router.push({
        name: "index",
        params: {
          index: index,
          cid: cid
        }
      },)
    },
    // 搜索返回首页
    searchData() {
      this.$router.push({
        name: "index",
        params: {
          keyword: this.keyword,
        }
      },)
    },
  },
}
</script>

<style scoped>
@import '~@/assets/css/user.css';

</style>
